<template>
    <div class="order_list">
        <van-cell-group>
            <van-field
                v-model="mobile"
                center
                clearable
                label="手机号码"
                placeholder="请输入手机号">
                <van-button slot="button" size="normal" type="primary" @click="searchOrder">查找</van-button>
            </van-field>
        </van-cell-group>
        <div class="order-item clearfix" v-for="(item, i) in orderList" :key="i">
            <div class="detail_header">
                <div>订单号：{{item.id}}</div>
                <div>下单时间：{{item.create_date | timeFilter}}</div>
            </div>
            <div class="detail_list" v-if="item.goodList" v-for="(list,index) in item.goodList" :key="index">
                <div class="detail_row">
                    <div class="detail_img">
                        <img :src="list.image" alt="" width="100%">
                    </div>
                    <div class="detail_text">
                        <div class="detail_name">{{list.name}}</div>
                        <div class="price_stepper clearfix">
                            <div class="detail_price">
                                <div>¥ {{list.price|moneyFilter}} 元</div>
                                <div>x{{list.count}}</div>
                            </div>
                        </div>
                        <div class="all_price">¥ {{list.price*list.count | moneyFilter}} 元</div>
                    </div>
                </div>
            </div>
            <div class="total-amount">商品合计：¥ {{item.amount|moneyFilter}} 元</div>
        </div>
    </div>
</template>
<script>
import { toMoney, TransformTime } from "@/filter/moneyFilter.js";
import { Toast } from "vant";
import axios from "axios";
import url from "@/serviceAPI.config.js";
export default {
  data() {
    return {
      mobile: '',
      orderList: []
    };
  },
  filters: {
    moneyFilter(money) {
      return toMoney(money);
    },
    timeFilter(val) {
      return TransformTime(val);
    }
  },
  methods: {
      searchOrder() {
          if (this.mobile) {
              this.getOrderList();
          } else {
              Toast.fail("请填写手机号码")
          }
      },
    getOrderList() {
      const mobile = this.mobile;
      let orderList = [];
      axios({
        url: url.getOrderList,
        method: "get",
        params: {
          mobile: mobile
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            orderList = res.data.data;
            let index = 0;
            orderList.forEach(item => {
              axios({
                url: url.getOrderDetail,
                method: "get",
                params: {
                  orderId: item.id
                }
              })
                .then(response => {
                  if (response.data.code == 200) {
                    orderList[index].goodList = response.data.data;
                    index++;
                  } else {
                    Toast.fail(res.data.message);
                    console.log(res);
                  }
                  if (index == res.data.data.length) {
                    this.orderList = orderList;
                    console.log(orderList);
                  }
                })
                .catch(err => {
                  Toast.fail("网络异常");
                  console.log(err);
                });
            });
          } else {
            Toast.fail(res.data.message);
            console.log(res);
          }
        })
        .catch(err => {
          Toast.fail("网络异常");
          console.log(err);
        });
    },
    goback: function() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.detail_header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.3rem 0.2rem;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
}
.detail_list {
  background-color: #fff;
}
.order-item {
  margin-top: 30px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 60px rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 40px rgba(0, 0, 0, 0.06) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
.order-item:before {
  width: 70%;
  height: 55%;
  content: " ";
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 10px;
  z-index: -1;
  -webkit-transform: skew(-15deg) rotate(-6deg);
  -moz-transform: skew(-15deg) rotate(-6deg);
  transform: skew(-15deg) rotate(-6deg);
  left: 15px;
}
.detail_row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0.5rem;
  font-size: 0.85rem;
  border-bottom: 1px solid #e4e7ed;
}
.detail_img {
  flex: 6;
}
.detail_text {
  flex: 18;
  padding-left: 10px;
}
.price_stepper {
  margin-top: 20px;
}
.detail_price {
  display: flex;
  justify-content: space-between;
}
.all_price {
  margin-top: 5px;
  color: red;
}
.total-amount {
  font-size: 0.8rem;
  float: right;
  margin: 0.3rem 1rem 1rem 0;
}
</style>
